<template>
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <div class="">
        <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
          <a-form layout="inline">

            <a-form-item label="字典名称">
              <a-input v-model="searchParams.name"></a-input>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
              <a-button type="primary" icon="plus" @click="handleCreate" style="margin-left: 8px">新增</a-button>
            </a-form-item>

          </a-form>
        </a-card>
      </div>

      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="id"
               :pagination="false" :loading="loading"
               @change="handleTableChange"
      >

        <template slot="name" slot-scope="text,record">
          <a href="javascript:;">{{text}}</a>
        </template>

        <span slot="action" slot-scope="text, record">
        <template>
          <a href="javascript:;" @click="handleUpdate(record)">修改</a>
          <a-divider type="vertical"/>
          <a href="javascript:;" @click="handleDelete(record)">删除</a>
          <a-divider type="vertical"/>
          <a href="javascript:;" @click="handleLowerLevel(record)">添加下级</a>
        </template>
      </span>

      </a-table>

      <a-modal  :maskClosable="false"
        :title="mdl.dialogTitleMap[mdl.dialogStatus]"
        :width="700"
        v-model="mdl.visible"
        @ok="mdl.dialogStatus === 'update' ?  updateData() : createData() "
      >

        <div class="table_style1" style="margin-bottom: 24px">
          <table class="table table-bordered  table-condensed" style="margin-bottom: 10px;background-color:#f5f5f5;">
            <tbody>
            <tr>
              <td class="width-15 active"><label class="pull-right"><font color="red">*</font>所属字典：</label></td>
              <td >
                <a-input placeholder="" disabled v-model="mdl.formData.parentName"/>
              </td>
              <td class="width-15 active"><label class="pull-right"><font color="red">*</font>字典编码：</label></td>
              <td>
                <a-input placeholder="" v-model="mdl.formData.code"/>
              </td>
            </tr>
            <tr>
              <td class="width-15 active"><label class="pull-right"><font color="red">*</font>字典名称：</label></td>
              <td >
                <a-input placeholder=""  v-model="mdl.formData.name"/>
              </td>
              <td class="width-15 active"><label class="pull-right">权重：</label></td>
              <td>
                <a-input placeholder=""   v-model="mdl.formData.weight"/>
              </td>
            </tr>
            <tr>
              <td class="width-15 active"><label class="pull-right">字典值：</label></td>
              <td>
                <a-input placeholder=""   v-model="mdl.formData.value"/>
              </td>
              <td class="width-15 active"><label class="pull-right">排序：</label></td>
              <td>
                <a-input placeholder=""   v-model="mdl.formData.ordered"/>
              </td>
            </tr>
            <tr>
              <td class="width-15 active"><label class="pull-right">备注：</label></td>
              <td>
                <a-input placeholder=""   v-model="mdl.formData.remark"/>
              </td>
            </tr>
            </tbody>
          </table>


        </div>
      </a-modal>

    </a-card>


  </div>
</template>

<script>

  import {
    getSysDictList,
    createSysDict,
    deleteSysDict,
    updateSysDict,
    getSysDictDetail
  } from "@/api/SysDict"

  export default {
    components: {},
    data() {
      return {

        /*   -------搜索框--------*/
        searchParams: {
          name: ''
        },

        /*   -------分页--------*/
        pagination: this.$defaultSettings.pagination ,

        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加',
            lowerLevel:'添加下级'
          },
          visible: false,
          title: '',
          formData: {
            id: '',
            pid: '',
            name: '',
            code: '',
            value: '',
            ordered: '',
            weight: '',
            remark: '',
            createTime: '',
            deleteFlag: '',
          },
          labelCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 5
            }
          }
          ,
          wrapperCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 16
            }
          }
          ,
        },


        /*   -------表格--------*/
        loading: false,
        columns:[
          {
            title: '字典名称',
            dataIndex: 'name'
          },
          {
            title: '字典码',
            dataIndex: 'code'
          },
          {
            title: '字典值',
            dataIndex: 'value'
          },
          {
            title: '排序',
            dataIndex: 'ordered'
          },
          {
            title: '权重',
            dataIndex: 'weight'
          },
          {
            title: '备注',
            dataIndex: 'remark'
          },
          {
            title: '删除标记',
            dataIndex: 'deleteFlag'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '200px',
            scopedSlots: {customRender: 'action'}
          }
        ],
        data: []

      }
    },
    inject: ['upShow'],filters: {},
    created() {

    },
    mounted() {
      this.getTableData()
    },
    methods: {


      handleTableChange(pagination, filters, sorter) {
        this.pagination = pagination
        let sortOrder = ''
        let sortField = sorter.field ? sorter.field : ''
        if (sorter.order) {
          sortOrder = sortOrder === 'ascend' ? 'asc' : 'desc'
        }
        this.getTableData(sortField, sortOrder)
      },

      getTableData(sortField, sortOrder) {


        this.loading = true

        const parameter = {
          _search: false,//是否分页查询
          pageSize: this.pagination.pageSize || 10,
          pageNumber: this.pagination.current || 1,
          sortField: sortField || '',
          sortOrder: sortOrder || '',
          data:this.searchParams
        }
        getSysDictList(parameter).then(res => {
          this.loading = false
         // this.pagination.total = res.data.total
          this.data =   this.$util.filterRowChildren(res.data)

        }).catch(err => {
          this.loading = false
          this.upShow(2,'请求发生错误，数据获取失败')
        })
      },
      handleSearch() {
        this.getTableData()
      },

      setDefaults() {
        this.mdl.formData = {
          id:'',
          pid:'',
          name:'',
          code:'',
          value:'',
          ordered:'',
          weight:'',
          remark:'',
          createTime:'',
          deleteFlag:'',
          parentName:'根字典'
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true

      },
      createData() {
        const parameter = this.mdl.formData
        createSysDict(parameter).then(res => {
          if (res.code === 200 ) {
            this.upShow(2,"操作成功")
            this.mdl.visible = false
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2,"请求失败" , err)
        })
      },

      //编辑当前行
      handleUpdate(row) {
        console.log("这一行", row)
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },

      updateData(row) {
        const parameter = {
          id:this.mdl.formData.id,
          pid:this.mdl.formData.pid,
          name:this.mdl.formData.name,
          code:this.mdl.formData.code,
          value:this.mdl.formData.value,
          ordered:this.mdl.formData.ordered,
          weight:this.mdl.formData.weight,
          remark:this.mdl.formData.remark
        }
        updateSysDict(parameter).then(res => {
          if (res.code === 200 ) {
            this.upShow(2,"操作成功")
            this.mdl.visible = false
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2,"请求失败，",err)
        })
      },

      handleDelete(row) {
        deleteSysDict(row.id).then(res => {
          if (res.code === 200
          ) {
            this.upShow(1,res.msg || '删除成功')
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2)
        })
      },

      handleLowerLevel(row) {
        this.setDefaults()
        this.mdl.formData.pid = row.id // copy obj
        this.mdl.formData.parentName = row.name
        this.mdl.dialogStatus = 'lowerLevel'
        this.mdl.visible = true
      },


    }
  }
</script>

<style scoped>

</style>
